<template>
  <div class="container">
    <h3 class="title">
      <svg-icon icon-class="nested"
                class="title-icon" />广告管理
    </h3>

    <el-card>
      <div slot="header">
        <span>广告管理</span>
      </div>
      <el-form :model="form"
               label-position="left"
               label-width="120px">
        <el-form-item label="广告名称:">
          <!-- <el-input
            v-model="form.name"
            style="width:50%;"
            placeholder="请输入"
            :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
          ></el-input>-->
          {{form.name}}
        </el-form-item>
        <el-form-item label="广告类型:">
          <!-- <el-select v-model="form.type" placeholder="请选择" value-key="label">
            <el-option label="请选择" value></el-option>
            <el-option label="全屏广告" value="0"></el-option>
            <el-option label="半屏广告" value="1"></el-option>
          </el-select>-->
          {{form.type==0?'全屏广告':"半屏广告"}}
        </el-form-item>
        <el-form-item label="状态:">
          <!-- <el-radio-group v-model="form.status">
            <el-radio :label="1">上架</el-radio>
            <el-radio :label="0">下架</el-radio>
          </el-radio-group>-->
          {{form.status==1?'上架':'下架'}}
        </el-form-item>
        <el-form-item label="生效楼盘:">
          <!-- <el-select
            v-model="form.projectNames"
            placeholder="请选择"
            value-key="label"
            multiple
            style="width:300px"
          >
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="(item,index) in options"
              :key="index"
            ></el-option>
          </el-select>-->
          {{form.projectNames}}
        </el-form-item>
        <el-form-item label="生效时间:">
          {{form.date[0]}}-{{form.date[1]}}
          <!-- <el-date-picker
            v-model="form.date"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['12:00:00']"
          ></el-date-picker>-->
        </el-form-item>
        <el-form-item label="添加图片:">
          <div class="right">
            <div class="imgs"
                 v-for="(item,index) in imgs"
                 :key="index">
              <!-- <i class="el-icon-close" @click.self="deleteImg(index)"></i> -->
              <img :src="link +item"
                   :key="index"
                   alt />
            </div>
            <!-- <div class="imgs">
              <input
                type="file"
                accept="image/jpeg, image/jpg, image/png"
                @change="uploadImg($event)"
              />
              <i class="el-icon-plus"></i>
            </div>-->
          </div>
        </el-form-item>
        <el-form-item>
          <!-- <el-button type="primary" size="small" @click="addAd" v-if="id==''">确定</el-button> -->
          <!-- <el-button type="primary" size="small" v-if="id!=''" @click="editAds">确定</el-button> -->
          <el-button size="small"
                     @click="onCancle">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {
  getDetail,
  upload,
  addAllProject,
  addAd,
  getAll,
  editAd
} from "@/api/ad";
export default {
  name: "editManage",

  data () {
    return {
      form: {
        date: "",
        name: "",
        type: "",
        status: "",
        link: "",
        projectId: "",
        projectNames: []
      },
      imgs: [],
      id: "",
      options: [],
      tableData: [
        {
          code: 1,
          fundMethod: "非贷款类房款",
          fundName: "定金",
          pay: "1"
        },
        {
          code: 1,
          fundMethod: "非贷款类房款",
          fundName: "定金",
          pay: "1"
        }
      ],
      startTime: "",
      endTime: ""
    };
  },

  mounted () {
    this.link = process.env.VUE_APP_BASE_API;
    if (this.$route.query.id != undefined) {
      this.id = this.$route.query.id;
      this.getAll();
      this.getD(this.id);
    } else {
      this.addAllProject();
    }
  },
  methods: {
    getName (id) {
      this.options.map(item => {
        if (item.id == id) {
          return item.name;
        }
      });
    },
    getTime (timestamp) {
      var time = new Date(timestamp);
      var y = time.getFullYear(); //getFullYear方法以四位数字返回年份
      var M = time.getMonth() + 1; // getMonth方法从 Date 对象返回月份 (0 ~ 11)，返回结果需要手动加一
      M = m < 10 ? "0" + M : M;
      var d = time.getDate(); // getDate方法从 Date 对象返回一个月中的某一天 (1 ~ 31)
      d = d < 10 ? "0" + d : d;
      var h = time.getHours(); // getHours方法返回 Date 对象的小时 (0 ~ 23)
      h = h < 10 ? "0" + h : h;
      var m = time.getMinutes(); // getMinutes方法返回 Date 对象的分钟 (0 ~ 59)
      m = m < 10 ? "0" + m : m;
      var s = time.getSeconds(); // getSeconds方法返回 Date 对象的秒数 (0 ~ 59)
      s = s < 10 ? "0" + s : s;
      return y + "-" + M + "-" + d + " " + h + ":" + m + ":" + s;
    },
    addAllProject () {
      addAllProject().then(res => {
        this.options = res.data;
      });
    },
    getAll () {
      getAll().then(res => {
        this.options = res.data;
      });
    },
    editAds () {
      if (this.form.name == "") {
        return this.$message({
          message: "请输入广告名称",
          type: "warning"
        });
      }
      if (this.form.type == "") {
        return this.$message({
          message: "请选择广告类型",
          type: "warning"
        });
      }
      console.log(this.form.status);
      if (this.form.status == "" && this.form.status != 0) {
        return this.$message({
          message: "请选择状态",
          type: "warning"
        });
      }
      if (this.form.date == "") {
        return this.$message({
          message: "请选择时间范围",
          type: "warning"
        });
      }
      if (this.form.date != "") {
        this.startTime = this.form.date[0];
        this.endTime = this.form.date[1];
      }
      if (this.imgs.length == 0) {
        return this.$message({
          message: "请上传广告封面图",
          type: "warning"
        });
      }

      var img = this.imgs.join(",");
      var str = [];
      var projectId = this.form.projectNames.join(",");
      editAd(
        this.id,
        img,
        this.form.name,
        this.form.status,
        this.form.type,
        this.startTime,
        this.endTime,
        projectId
      ).then(res => {
        if (res.code == 200) {
          this.$message({
            message: "编辑成功",
            type: "success"
          });
          setTimeout(() => {
            document
              .querySelector(".tags-view-item.active>span.el-icon-close")
              .click();
          }, 1500);
        } else {
          this.$message({
            message: res.message,
            type: "warning"
          });
        }
      });
    },
    addAd () {
      console.log(this.form.projectNames);
      if (this.form.name == "") {
        return this.$message({
          message: "请输入广告名称",
          type: "warning"
        });
      }
      if (this.form.type == "") {
        return this.$message({
          message: "请选择广告类型",
          type: "warning"
        });
      }
      if (this.form.status == "") {
        return this.$message({
          message: "请选择状态",
          type: "warning"
        });
      }
      if (this.form.date == "") {
        return this.$message({
          message: "请选择时间范围",
          type: "warning"
        });
      }
      if (this.form.date != "") {
        this.startTime = this.form.date[0];
        this.endTime = this.form.date[1];
      }
      if (this.imgs.length == 0) {
        return this.$message({
          message: "请上传广告封面图",
          type: "warning"
        });
      }

      var img = this.imgs.join(",");
      var str = [];
      var projectId = this.form.projectNames.join(",");

      addAd(
        img,
        this.form.name,
        this.form.status,
        this.form.type,
        this.startTime,
        this.endTime,
        projectId
      ).then(res => {
        if (res.code == 200) {
          this.$message({
            message: "新增成功",
            type: "success"
          });
          setTimeout(() => {
            document
              .querySelector(".tags-view-item.active>span.el-icon-close")
              .click();
          }, 1500);
        } else {
          this.$message({
            message: res.message,
            type: "warning"
          });
        }
      });
    },
    getD (id) {
      getDetail(id).then(res => {
        this.form = res.data;
        this.form.type = String(res.data.type);
        var startTime = this.getTime(res.data.startTime);
        var endTime = this.getTime(res.data.endTime);
        this.form.date = [startTime, endTime];

        var arr = [];

        this.imgs = res.data.img.split(",");
      });
    },
    deleteImg (index) {
      this.imgs.splice(index, 1);
    },
    onCancle () {
      document
        .querySelector(".tags-view-item.active>span.el-icon-close")
        .click();
      this.$router.go(-1);
    },
    uploadImg (e) {
      let v = this;
      let files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      if (files[0].size > 5000000) {
        this.$message.error("上传图片大小应小于5M");
        return false;
      }
      upload(files[0]).then(res => {
        if (res.status) {
          v.imgs.push(res.dataxz);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  background-color: rgb(240, 242, 245);
  position: relative;
  .title {
    font-size: 14px;
    font-weight: 400;
    .title-icon {
      font-size: 14px;
      display: inline-block;
      margin-right: 5px;
    }
  }
  /deep/ .el-card__header {
    border: 0 none;
  }
}
.title-small {
  font-size: 14px;
}

.money {
  color: #409eff;
}
.right {
  overflow: hidden;
  .imgs {
    width: 120px;
    height: 120px;
    position: relative;
    margin: 0 20px 20px;
    background: #f5f5f5;
    border-radius: 5px;
    float: left;
    .el-icon-plus {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 3;
    }
    input {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      z-index: 9;
      cursor: pointer;
    }
    img {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      display: block;
    }
    .el-icon-close {
      font-size: 16px;
      color: #000;
      position: absolute;
      top: 4px;
      right: 4px;
      cursor: pointer;
    }
  }
}
</style>
